<template>
  <div class="content">
    <div class="content-box">
      <p style="border-bottom: 1px solid #ebeef5">添加账户</p>
      <el-form label-position="right" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="account" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="userGroup">
            <el-option value="超级管理员" label="超级管理员"></el-option>
            <el-option value="普通管理员" label="普通管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addaccount } from "@/apis/users";
export default {
  data() {
    return {
      account: "",
      password: "",
      userGroup: "超级管理员",
    };
  },
  methods: {
    //添加账户
    submit() {
      addaccount({
        account: this.account,
        password: this.password,
        userGroup: this.userGroup,
      }).then((res) => {
        if (res.data.code == 0) {
          console.log(111);
          this.$message({
            message: "恭喜你，" + this.account + "您已成功注册账号",
            type: "success",
          });
          this.resetForm();
        }
      });
    },
    resetForm() {
      (this.account = ""),
        (this.password = ""),
        (this.userGroup = "超级管理员");
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  flex: 1;
  padding: 15px;
}
.content-box {
  padding: 15px;
  p {
    margin-bottom: 15px;
    height: 48px;
    line-height: 48px;
  }
}
</style>